<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.earth{
				width: 310px;
				height: 310px;
				/*设置背景图*/
				background-image: url(images/ear.png);
				border-radius: 160px;/*设置圆角*/
				
				/*设置坐标系*/
				position: relative;
				/*创建动画，设置参数  速度不均匀造成前慢后快，加个linear转速均匀*/
				animation: run 5s linear infinite;
				
				
			}
			.earth:hover{
				/*hover事件：鼠标移入暂停，移除继续旋转     */
				animation-play-state:paused ;/*animation-play-state 播放状态        paused暂停*/
			}
			@keyframes run{/*定义动画关键帧   形状变化用transform*/
				from{transform: rotate(0deg);}/*rotate旋转  0deg从0度旋转 到360度结束 */
				to{transform: rotate(360deg);}
			}
			
		</style>
	</head>
	<body>
		<h3>地球旋转</h3>
		<div class="earth">
			
		</div>
	</body>
</html>
